<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-button @click="reloginHandler">
      重新登录
    </el-button>

    <div style="margin-top:20px">
      <el-button @click="accessedRouterHandler(1)">
        权限a:all
      </el-button>
      <el-button @click="accessedRouterHandler(2)">
        权限b:all
      </el-button>
      <el-button @click="accessedRouterHandler(0)">
        权限all
      </el-button>
    </div>
    <div style="margin-top:20px">
      <el-button v-permission="['a:all']">
        a:all
      </el-button>
      <el-button v-permission="['a:list']">
        a:list
      </el-button>
      <el-button v-permission="['b:all']">
        b:all
      </el-button>
      <el-button v-permission="['b:list']">
        b:list
      </el-button>
    </div>
  </div>
</template>

<script>
import actions from '@/shared/index.js'
export default {
  name: 'About',
  methods: {
    reloginHandler() {
      actions.setGlobalState({ isLogin: false })
    },
    accessedRouterHandler(type) {
      let roles = []
      switch (type) {
        case 0:
          roles = ['a:all', 'b:all', 'a:list', 'b:list']
          break
        case 1:
          roles = ['a:all', 'a:list']
          break
        case 2:
          roles = ['b:all', 'b:list']
          break
        default:
          roles = []
          break
      }
      this.$store.dispatch('app/updateRoles', roles)
    },
  },
}
</script>
